﻿<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMD模型分类检索</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">



</head>
<body>
<div class="container" style="background: #eee;padding: 2em;">
	<!-- Filter Controls - Simple Mode -->
	<div class="row">
		<ul class="simplefilter">
			过滤：
			<li class="active" data-filter="all">全部</li>
			<li data-filter="1">有名</li>
			<li data-filter="2">歌姬</li>
			<li data-filter="3">制服</li>
			<li data-filter="4">改模</li>
			<li data-filter="5">提取</li>
			<li data-filter="6">舰娘军事</li>
			<li data-filter="7">动漫游戏</li>
			<li data-filter="8">漂亮可爱</li>
			<li data-filter="9">未归类</li>
		</ul>
	</div>
	<!-- Shuffle & Sort Controls -->
	<div class="row">
		<ul class="sortandshuffle">
			排序： 
			<!-- Basic shuffle control -->
			<li class="shuffle-btn" data-shuffle>乱序</li>
			<!-- Basic sort controls consisting of asc/desc button and a select -->
			<li class="sort-btn active" data-sortAsc>正序</li>
			<li class="sort-btn" data-sortDesc>反序</li>
			<select data-sortOrder>
				<option value="domIndex">
					顺序
				</option>
				<option value="sortData">
					模型名
				</option>
			</select>
		</ul>
	</div>
	<!-- Search control -->
	<div class="row search-row">
		搜索：
		<input type="text" class="filtr-search" name="filtr-search" data-search>
	</div>

	<div class="row">
		
		<div class="filtr-container">
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+alice_alteanative_160907a.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iuhg5l4wvud" target="view_window">alice_alteanative_160907a</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="7">
			<img class="img-responsive" src="img/+セイバーVer1.05.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iskMol4wz2j" target="view_window">セイバーVer1.05</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2">
			<img class="img-responsive" src="img/+石英式泠鸢yousa_v1.2配布版.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/ih7SBl4wwze" target="view_window">石英式泠鸢yousa_v1.2配布版</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="6">
			<img class="img-responsive" src="img/+on_YUKIKAZE_v095.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/isMStl4wyqh" target="view_window">on_YUKIKAZE_v095</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Alicia.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iKF9al4wtpg" target="view_window">Alicia</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Angela Balzac (Kakomiki).png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iZDKRl4wu7e" target="view_window">+Angela Balzac (Kakomiki)</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Tda Uniform Haku 2.1 by iRon0129.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iAgS7l59hna" target="view_window">+Tda Uniform Haku 2.1 by iRon0129</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Appearance Miku_大人バージョン.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/i4e3Tl59lzg" target="view_window">+Appearance Miku_大人バージョン</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+kizunaai.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iHX9ol59wbi" target="view_window">+kizunaai</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Miku Hatsune V4x YoiStyle ver1.1.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/i2hnol5a8ed" target="view_window">+Miku Hatsune V4x YoiStyle ver1.1</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+on_Hexa_v102.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iHpsXl5a63a" target="view_window">+on_Hexa_v102</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+on_SHIMAKAZE_v090.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iACT5l5a4gb" target="view_window">+on_SHIMAKAZE_v090</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+REM式巡音ルカV4Xver 1.1.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/izD3Ql5a5de" target="view_window">+REM式巡音ルカV4Xver 1.1</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Sour式初音ミクVer.1.01.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/i64DVl5a9af" target="view_window">+Sour式初音ミクVer.1.01</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Tda式デフォ服ミク_ver1.1.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/i9MDTl5abqd" target="view_window">+Tda式デフォ服ミク_ver1.1</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Tda式初音ミク_盗賊つばき流モーショントレースモデルv1.08.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iXALTl5ag8f" target="view_window">+Tda式初音ミク_盗賊つばき流モーショントレースモデルv1.08</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Tda式初音ミクV4X_Ver1.00.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iRUcul5ajid" target="view_window">+Tda式初音ミクV4X_Ver1.00</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Tda式初音ミク-アペンドVer1.10.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iOkyxl5almj" target="view_window">+Tda式初音ミク-アペンドVer1.10</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+Tda式初音ミク背中見せデフォ服 Ver1.00.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/iNIMxl5ar2f" target="view_window">+Tda式初音ミク背中見せデフォ服 Ver1.00</a></span></div>
			<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1">
			<img class="img-responsive" src="img/+YYB Hatsune Miku_10th.png">
			<span class="item-desc"><a href="https://softbank.lanzous.com/imgIOl5ayhc" target="view_window">+YYB Hatsune Miku_10th</a></span></div>
			
			
			
			
			
			
			
			
			
		<!-- 分界线 data-sort="Busy streets"-->	
		</div>
	</div>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.filterizr.min.js"></script>
<script src="js/controls.js"></script>
<script type="text/javascript">
$(function() {
	$('.filtr-container').filterizr();
});
</script>


</body>
</html>
